<template>
    <el-input v-model="coach_name" style="width: 240px;margin-right: 15px;" placeholder="搜索教练" clearable />
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" @current-change="handleCurrentChange">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="coach_name" label="教练名称" width="180" />
        <el-table-column prop="coach_phone" label="教练手机号" width="180" />
        <el-table-column prop="image" label="教练头像">
            <template #default="{ row }">
                <el-avatar :src=row.image />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total=total @size-change="handleSizeChange" @current-change="handleCurrentChange"
        class="pagination-container" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
const tableData = ref([])
// 分页值
const pageSize4 = ref(5)
const currentPage4 = ref(1)
const total = ref(10)
const coach_name = ref()
function getdata() {
    axios.get("http://127.0.0.1:8000/driver_school/coach_list", {
        params: {
            page: currentPage4.value,
            count: pageSize4.value,
            coach_name:coach_name.value
        }
    })
        .then(res => {
            console.log(res)
            tableData.value = res.data.data
            total.value = res.data.total
        })
        .catch(err => {
            console.error(err);
        })
}
// 分页
function handleSizeChange(size) {
    pageSize4.value = size
    getdata()
}
// 分页
function handleCurrentChange(page) {
    currentPage4.value = page
    getdata()
}
function search(){
    getdata()
}
onMounted(() => {
    // Your code here
    getdata()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>